<template>
  <view class="custom-navbar" :style="navbarStyle">
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="nav-content" :style="{ height: navBarHeight + 'px' }">
      <view class="back-btn" @tap="onBack" v-if="showBack">
        <image src="/static/back-btn.png" />
      </view>
      <view class="title">{{ title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomNavbar',
  props: {
    title: { type: String, default: '海马体·美力全开' },
    showBack: { type: Boolean, default: false }
  },
  data() {
    return {
      statusBarHeight: 24,
      navBarHeight: 44,
      bgColor: '#00000000',
      textColor: '#fff'
    }
  },
  computed: {
    navbarStyle() {
      return {
        background: this.bgColor,
        color: this.textColor
      }
    }
  },
  async mounted() {
    // 获取系统信息并暴露尺寸给父组件
    try {
      const systemInfo = await dd.getSystemInfo();
      this.statusBarHeight = systemInfo?.statusBarHeight || 24;
      this.navBarHeight = systemInfo?.platform === 'ios' ? 44 : 48;
      this.$emit('nav-dimensions', {
        statusBarHeight: this.statusBarHeight,
        navBarHeight: this.navBarHeight
      });
    } catch (e) {
      // 兼容：默认尺寸并向父组件透传
      this.$emit('nav-dimensions', {
        statusBarHeight: this.statusBarHeight,
        navBarHeight: this.navBarHeight
      });
    }
  },
  methods: {
    onBack() {
      dd.navigateBack();
      // this.$emit('back');
    }
  }
}
</script>

<style scoped>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.status-bar {
  background: inherit;
}

.nav-content {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  background: inherit;
}

.back-btn {
  width: 48rpx;
  height: 48rpx;
}

.back-btn image {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  flex: 1;
  text-align: center;
}
</style> 